/**
 * Created by 小敏哥 on 2017/3/24.
 */
import React, {Component} from 'react';
import style from './emptyCarNumberItem.scss';
class EmptyCarNumberItem extends Component {
    constructor(props) {
        super(props);
        this.toUpper = this.toUpper.bind(this);
        this.inputClick = this.inputClick.bind(this);
        this.inputBlur = this.inputBlur.bind(this);
    }

    //车牌格式化，6-7位数字或字母，第七位允许为中文港澳
    toUpper(e) {
        let pattern = /([^A-Za-z0-9]|\s)*/g;
        let lastPattern=/([^A-Za-z0-9港澳]|\s)*/g;
        let finalValue='';
        var target=e.target;
        //兼容部分安卓maxlength失效
        if (target.value.length > 7) {
            target.value = target.value.substr(0, 7);
        }
        if(target.value.length==7){
            finalValue=target.value.substr(0, 6).replace(pattern, '').toUpperCase()+target.value.substr(6, 1).replace(lastPattern, '').toUpperCase();
        }
        else{
            finalValue=target.value.replace(pattern, '').toUpperCase();
        }
        //兼容ios输入法
        setTimeout(()=>{
            target.value = finalValue;
        },0)
    }

    getChooseProvince() {
        this.props.getName(1)
    }

    //根据状态设置input显示或隐藏
   /* getInputClass() {
        return this.state.showRealInput ? style.realInput : style.realInput + ' ' + style.hide;
    }*/

    //封装点击事件
    inputClick() {
        /*this.setState({
            showRealInput: true,
            inputType: 'text'
        });*/
        this.props.onClick()
    }

    inputBlur(e) {
      /*  this.setState({
            inputType: 'password',
            showRealInput: false
        });*/
        this.props.onBlur(e.target.value)
    }

    render() {
        return <div className={style.container}>
            <div className={style.group}>
                <div className={style.inputGroup}>
                    <div className={style.EmptyCarNumberItemIcon} onClick={() => {
	                    this.getChooseProvince()
                    }}>
                        {/*<span getChooseProvince={(name) => this.getChooseProvince(name)} carPrefix=/>*/}
                        <span>{this.props.carPrefix}</span>
                        <img src="./images/icon_enter blue.png"/></div>
                   {/* <div className={style.inputs}>*/}
                        <input className={style.realInput} maxLength="7" type="url"
                               placeholder="请输入您的车牌号码..."
                               onClick={this.inputClick} onFocus={this.props.onFocus} onBlur={this.inputBlur}
                               onInput={this.toUpper}/>
                      {/*  <input placeholder="请输入您的车牌号码..." value={this.state.cacheVal}/>
                    </div>*/}
                </div>
                <div className={style.emptyGroup}></div>
            </div>
        </div>
    }
}


export default EmptyCarNumberItem